<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm compile">
        <el-form-item label="编号" prop="serial_number">
            <el-input v-model="ruleForm.serial_number"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="post">
            <el-input v-model="ruleForm.post"></el-input>
        </el-form-item>
        <el-form-item label="投票类型">
            <el-radio class="radio" v-model="ruleForm.vote_type" label="0">最佳主题酒店评选活动</el-radio>
            <el-radio class="radio" v-model="ruleForm.vote_type" label="1">最佳度假酒店评选活动</el-radio>
            <el-radio class="radio" v-model="ruleForm.vote_type" label="2">最佳度假酒店评选活动</el-radio>
            <el-radio class="radio" v-model="ruleForm.vote_type" label="3">酒店业十大风云人物</el-radio>
        </el-form-item>
        <el-form-item label="酒店展示背景图">
            <el-upload class="avatar-uploader" :action="uploadingUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="hotel_img" :src="hotel_img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="logo">
            <el-upload class="avatar-uploader" :action="uploadingUrl" :show-file-list="false" :on-success="handleAvatarSuccessLogo" :before-upload="beforeAvatarUpload">
                <img v-if="imgLogo" :src="imgLogo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="活动形式" prop="introduce">
            <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="ruleForm.introduce">
            </vue-editor>
        </el-form-item>
        <el-form-item style="margin-left:100px;">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="backList()">返回列表</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { VueEditor } from 'vue2-editor'

export default {
    data() {
        return {
            showType: true,
            uploadingUrl: this.ajaxUrl() + "/index/image",
            hotel_img: "",
            imgLogo: "",
            ruleForm: {
                serial_number: '',
                name: '',
                post: '',
                introduce: '',
                vote_type: "0"
            },
            rules: {
                serial_number: [
                    { required: true, message: '请输入编号', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                position: [
                    { required: true, message: '请输入职位', trigger: 'blur' }
                ],
            }
        };
    },
    mounted() {
        if (this.$route.query.id) {
            this.showType = false;

            this.$http.get(this.ajaxUrl() + "/mess/itemIdSelect?id=" + this.$route.query.id).then((res) => {
                if (res.data.type === 'succeed') {
                    res.data.data.vote_type += "";
                    this.ruleForm = res.data.data;
                    var img = JSON.parse(this.ruleForm.img);

                    if (img.hotelImg) {
                        this.hotel_img = img.hotelImg;
                    }
                    if (img.logoImg) {
                        this.imgLogo = img.logoImg;
                    }
                    this.$message({
                        type: 'success',
                        message: '查询成功!'
                    });
                } else {
                    this.$message({
                        type: 'info',
                        message: '查询失败!'
                    });
                }
            })
        }
    },
    components: {
        VueEditor
    },
    methods: {
        backList() {
            this.$router.push('/vote');
        },
        handleAvatarSuccess(res, file) {
            this.hotel_img = this.ajaxUrl() + "/images" + file.response.msg
        },
        handleAvatarSuccessLogo(res, file) {
            this.imgLogo = this.ajaxUrl() + "/images" + file.response.msg
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (file.type != 'image/jpeg' && file.type != 'image/png') {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        handleImageAdded: function(file, Editor, cursorLocation) {
            if (!file) {
                return;
            }
            var formData = new FormData();
            formData.append('file', file);

            this.axios({
                url: this.ajaxUrl() + '/index/image',
                method: 'POST',
                data: formData
            })
                .then((result) => {
                    Editor.insertEmbed(cursorLocation, 'image', this.ajaxUrl() + "/images" + result.data.msg);
                })
                .catch((err) => {
                    this.$message.error('图片上传失败');
                })
        },
        submitForm(formName) {
            this.ruleForm.img = JSON.stringify({ hotelImg: this.hotel_img, logoImg: this.imgLogo });

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.showType) {
                        this.formAdd();
                    } else {
                        this.formAmend();
                    }
                } else {
                    return false;
                }
            });

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        formAmend(formAdd) {
            this.$http.get(this.ajaxUrl() + '/mess/itemDataAmend', {
                params: {
                    infodata: this.ruleForm
                }
            }).then((res) => {
                if (res.data.type === 'succeed') {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.$router.push('/vote');
                } else {
                    if (res.data.message === '编号重复') {
                        this.$message({
                            type: 'info',
                            message: '编号重复!'
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: '修改失败!'
                        });
                        this.$router.push('/vote');
                    }
                }
            })
        },
        formAdd() {
            this.$http.get(this.ajaxUrl() + '/mess/itemAddData', {
                params: {
                    infodata: this.ruleForm
                }
            }).then((res) => {
                if (res.data.type === 'succeed') {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.$router.push('/vote');
                } else {
                    if (res.data.message === '编号重复') {
                        this.$message({
                            type: 'info',
                            message: '编号重复!'
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: '添加失败!'
                        });
                        this.$router.push('/vote');
                    }
                }
            })
        }
    }
}
</script>
<style>
.compile {
    width: 800px;
}

.ql-editor {
    min-height: 300px;
}

.el-upload>img {
    max-width: 200px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>


